<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            display: flex;
            width: 500px;
            height: 500px;
            background-color: gold;

            /* 不换行 */
            /* flex-wrap: nowrap; */

            /* flex-wrap: wrap; */

            flex-wrap: wrap-reverse;
        }
    </style>
</head>
<body>
     <div class="box">
         <!-- 默认情况下，项目中主轴上排列是不会换行的，如果装不下，项目会自动压缩 -->
         <div class="item" style="width:100px; height:100px; background:red">son1</div>
         <div class="item" style="width:100px; height:100px; background:blue">son2</div>
         <div class="item" style="width:100px; height:100px; background:yellowgreen">son3</div>
         <div class="item" style="width:100px; height:100px; background:pink">son4</div>
         <div class="item" style="width:100px; height:100px; background:red">son5</div>
         <div class="item" style="width:100px; height:100px; background:blue">son6</div>
     </div>
</body>
</html>